<template>
    <div>

      <el-card>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单查询</el-breadcrumb-item>
            <el-breadcrumb-item>订单详情</el-breadcrumb-item>
          </el-breadcrumb>
          <h2 style="text-align: left">订单详情</h2>
      </el-card>


      <el-card style="margin-top: 20px;height: 200px">
        <p style="font-size: 24px;margin: 0;text-align: left" v-if="order.orderStatus == 1">已完成</p>
        <p style="font-size: 24px;margin: 0;text-align: left" v-if="order.orderStatus == 2">已发货</p>
        <p style="font-size: 24px;margin: 0;text-align: left" v-if="order.orderStatus == 3">待发货</p>
        <p style="font-size: 24px;margin: 0;text-align: left" v-if="order.orderStatus == 4">待付款</p>


        <div style="text-align: left;padding: 50px" v-if="order.orderStatus==1">

          <span style="border: 1px solid dodgerblue;text-align: center;width: 25px;height: 25px;border-radius: 50%;line-height: 25px;color: dodgerblue" class="el-icon-check">

          </span>

          <div style="text-align: left;height: 70px;width: 150px;display: inline-block;vertical-align:top;margin: 0 10px">
            买家下单<br>
            {{order.gmtpay}}
          </div>

          <div style="border:1px solid dodgerblue;width: 170px;display: inline-block;margin-right: 10px;vertical-align: middle" >

          </div>

          <span style="border: 1px solid dodgerblue;text-align: center;width: 25px;height: 25px;border-radius: 50%;line-height: 25px;color: dodgerblue" class="el-icon-check">

          </span>

          <div style="text-align: left;height: 70px;width: 150px;display: inline-block;vertical-align:top;margin: 0 10px">
            卖家发货<br>
            {{order.gmtsend}}
          </div>

          <div style="border:1px solid dodgerblue;width: 170px;display: inline-block;margin-right: 10px;vertical-align: middle" >

          </div>

          <span style="border: 1px solid dodgerblue;text-align: center;width: 25px;height: 25px;border-radius: 50%;line-height: 25px;color: dodgerblue" class="el-icon-check">

          </span>

          <div style="text-align: left;height: 70px;width: 150px;display: inline-block;vertical-align:top;margin: 0 10px">
            买家收货<br>
            {{order.gmtsign}}
          </div>

        </div>


        <div style="text-align: left;padding: 50px" v-if="order.orderStatus==2">
          <span style="border: 1px solid dodgerblue;text-align: center;width: 25px;height: 25px;border-radius: 50%;line-height: 25px;color: dodgerblue" class="el-icon-check">

          </span>

          <div style="text-align: left;height: 70px;width: 150px;display: inline-block;vertical-align:top;margin: 0 10px">
            买家下单<br>
            {{order.gmtpay}}
          </div>

          <div style="border:1px solid dodgerblue;width: 170px;display: inline-block;margin-right: 10px;vertical-align: middle" >

          </div>

          <span style="border: 1px solid dodgerblue;text-align: center;width: 25px;height: 25px;border-radius: 50%;line-height: 25px;color: dodgerblue" class="el-icon-check">

          </span>

          <div style="text-align: left;height: 70px;width: 150px;display: inline-block;vertical-align:top;margin: 0 10px">
            卖家发货<br>
            {{order.gmtsend}}
          </div>

          <div style="border:1px solid dodgerblue;width: 170px;display: inline-block;margin-right: 10px;vertical-align: middle" >

          </div>

          <span style="background-color: dodgerblue;text-align: center;width: 25px;height: 25px;border-radius: 50%;line-height: 25px;color: white" >
            3
          </span>

          <div style="text-align: left;height: 70px;width: 150px;display: inline-block;vertical-align:top;margin: 0 10px">
            买家收货<br>
            {{order.gmtsign}}
          </div>

        </div>


        <div style="text-align: left;padding: 50px" v-if="order.orderStatus==3">
          <span style="border: 1px solid dodgerblue;text-align: center;width: 25px;height: 25px;border-radius: 50%;line-height: 25px;color: dodgerblue" class="el-icon-check">

          </span>

          <div style="text-align: left;height: 70px;width: 150px;display: inline-block;vertical-align:top;margin: 0 10px">
            买家下单<br>
            {{order.gmtpay}}
          </div>

          <div style="border:1px solid dodgerblue;width: 170px;display: inline-block;margin-right: 10px;vertical-align: middle" >

          </div>

          <span style="background-color: dodgerblue;text-align: center;width: 25px;height: 25px;border-radius: 50%;line-height: 25px;color: white" >
            2
          </span>

          <div style="text-align: left;height: 70px;width: 150px;display: inline-block;vertical-align:top;margin: 0 10px">
            卖家发货<br>
            {{order.gmtsend}}
          </div>

          <div style="border:1px solid dodgerblue;width: 170px;display: inline-block;margin-right: 10px;vertical-align: middle" >

          </div>

          <span style="background-color: dodgerblue;text-align: center;width: 25px;height: 25px;border-radius: 50%;line-height: 25px;color: white" >
            3
          </span>

          <div style="text-align: left;height: 70px;width: 150px;display: inline-block;vertical-align:top;margin: 0 10px">
            买家收货<br>
            {{order.gmtsign}}
          </div>

        </div>


        <div style="text-align: left;padding: 50px" v-if="order.orderStatus==4">
          <span style="background-color: dodgerblue;text-align: center;width: 25px;height: 25px;border-radius: 50%;line-height: 25px;color: white;" >
            1
          </span>

          <div style="text-align: left;height: 70px;width: 100px;display: inline-block;vertical-align:top;margin: 0 10px">
            买家下单
          </div>

          <div style="border:1px solid dodgerblue;width: 170px;display: inline-block;margin-right: 10px;vertical-align: middle" >

          </div>

          <span style="background-color: dodgerblue;text-align: center;width: 25px;height: 25px;border-radius: 50%;line-height: 25px;color: white" >
            2
          </span>

          <div style="text-align: left;height: 70px;width: 100px;display: inline-block;vertical-align:top;margin: 0 10px">
            卖家发货
          </div>

          <div style="border:1px solid dodgerblue;width: 170px;display: inline-block;margin-right: 10px;vertical-align: middle" >

          </div>

          <span style="background-color: dodgerblue;text-align: center;width: 25px;height: 25px;border-radius: 50%;line-height: 25px;color: white" >
            3
          </span>

          <div style="text-align: left;height: 70px;width: 100px;display: inline-block;vertical-align:top;margin: 0 10px">
            买家收货
          </div>

        </div>

      </el-card>

      <el-card style="margin-top: 20px">
        <div style="width: 33%;text-align: left;display: inline-block;vertical-align: top">
          <h4 style="text-align: left;font-weight: normal;margin-top: 0;font-size: 16px">
            收货人信息
            <span style="color: dodgerblue;cursor: pointer;font-size: 14px;margin-left: 10px" @click="showEditForm">编辑</span>
          </h4>
          <p style="font-size: 14px">收货人信息：{{userDetail.consignee}}</p>
          <p style="font-size: 14px">联系人电话：{{userDetail.consigneeTel}}</p>
          <p style="font-size: 14px">收货地址：{{userDetail.address}}</p>
          <p style="font-size: 14px">买家留言：{{order.usermessage}}</p>
        </div>

        <div style="width: 33%;text-align: left;display: inline-block;vertical-align: top">
          <h4 style="text-align: left;font-weight: normal;margin-top: 0;font-size: 16px">订单信息</h4>
          <p style="font-size: 14px">订单编号：{{order.ordernum}}   <span style="color: dodgerblue;cursor: pointer" @click="copyText(order.ordernum)">复制</span> </p>
          <p style="font-size: 14px">下单时间：{{order.gmtcreate}}</p>
          <p style="font-size: 14px" v-if="order.paymethod==1">
            支付方式：微信支付
          </p>
          <p style="font-size: 14px" v-if="order.paymethod==2">
            支付方式：支付宝支付
          </p>
          <p style="font-size: 14px" v-if="order.paymethod==3">
            支付方式：银行卡支付
          </p>
          <p style="font-size: 14px">订单类型：{{order.isCommodity==1?'实体商品':'线上课程'}}</p>
          <p style="font-size: 14px">订单来源：{{order.source==1?'APP':'线下实体店'}}</p>
          <p style="font-size: 14px">订单备注：{{order.remarks}}</p>
        </div>

        <div style="width: 33%;text-align: left;display: inline-block;vertical-align: top">
          <h4 style="text-align: left;font-weight: normal;margin-top: 0;font-size: 16px">
            买家信息
            <span style="color: dodgerblue;cursor: pointer;font-size: 14px;margin-left: 10px" @click="goUserDetails(order)">查看资料</span>
          </h4>
          <p style="font-size: 14px">微信昵称：{{userDetail.vx}}</p>
          <p style="font-size: 14px">用户姓名：{{order.user.username}}</p>
          <p style="font-size: 14px">用户性别：{{userDetail.gender}}</p>
          <p style="font-size: 14px">用户年龄：{{userDetail.age}}</p>
          <p style="font-size: 14px">手机号码：{{order.user.tel}}</p>
          <p style="font-size: 14px">注册时间：{{order.user.inserttime}}</p>
          <p style="font-size: 14px">最近登录时间：{{userDetail.loginTime}}</p>
        </div>


      </el-card>


      <el-card style="margin-top: 20px">
        <h4 style="text-align: left;font-weight: normal;margin-top: 0">订单详情列表</h4>
        <el-table :data="orderDetailList" stripe>


          <el-table-column label="课程信息"  width="400px" v-if="order.isCommodity != 1">
            <el-table-column label="课程图片" prop="courseVo.coursecover" width="200px">
              <template slot-scope="scope">
                <img :src="nginxUrl2+scope.row.courseVo.coursecover" style="height: 50px; width: 50px;border-radius: 50%">
              </template>
            </el-table-column>
            <el-table-column label="课程名称" prop="courseVo.coursename" width="200px"></el-table-column>
          </el-table-column>

          <el-table-column label="商品信息"  width="400px" v-if="order.isCommodity == 1">
            <el-table-column label="商品图片" prop="commodityVo.commoditycover" width="200px">
              <template slot-scope="scope">
                <img :src="nginxUrl1+scope.row.commodityVo.commoditycover" style="height: 50px; width: 50px;border-radius: 50%">
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="commodityVo.commodityname" width="200px"></el-table-column>
          </el-table-column>

          <el-table-column label="单价(元)" prop="courseVo.courseprice" width="130px" v-if="order.isCommodity != 1"></el-table-column>
          <el-table-column label="单价(元)" prop="commodityVo.commodityprice" width="130px" v-if="order.isCommodity == 1"></el-table-column>

          <el-table-column label="购买数量" prop="buycount"></el-table-column>

          <el-table-column label="发货状态">
            <template slot-scope="sc">
              <span v-if="sc.row.sendStatus == 1" style="color: chartreuse;">已完成</span>
              <span v-if="sc.row.sendStatus == 2" style="color: chocolate">已发货</span>
              <span v-if="sc.row.sendStatus == 3" style="color: red">待发货</span>
            </template>
          </el-table-column>

          <el-table-column label="合计(元)" prop="total"></el-table-column>


        </el-table>

        <div style="text-align:left;width: 20%;margin-left: 80%">
          <p style="font-size: 13px">商品总价：￥{{order.priceold}}</p>
          <p style="font-size: 13px">运费：￥0.00</p>

          <p style="font-size: 13px" v-if="order.couponid == null">优惠券：无</p>
          <p style="font-size: 13px" v-if="order.couponid != null">优惠券：{{coupon.couponname}}</p>

          <p style="font-size: 13px" v-if="order.couponid == null">优惠：￥0.00</p>
          <p style="font-size: 13px" v-if="order.couponid != null">优惠：￥{{coupon.reduce}}</p>


          <h4 style="font-weight: normal">本单实收：￥{{order.pricenew}}</h4>
        </div>

      </el-card>


      <el-dialog title="编辑会员权益" :visible.sync="editFormVisible" width="40%" :close-on-click-modal="false" @close="editFormClose">
        <el-form :model="editForm"  ref="editForm" size="small" label-width="100px" class="demo-ruleForm">
          <el-form-item label="收货人姓名" prop="consignee">
            <el-input v-model="editForm.consignee"></el-input>
          </el-form-item>

          <el-form-item label="联系电话" prop="consigneeTel">
            <el-input v-model="editForm.consigneeTel"></el-input>
          </el-form-item>

          <el-form-item label="收货地址" prop="address">
            <el-input v-model="editForm.address"></el-input>
          </el-form-item>


        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="doEdit">确 定</el-button>
            <el-button @click="editFormClose">取 消</el-button>
        </span>
      </el-dialog>



    </div>
</template>
<script>
    export default {
        data() {
            return {
              nginxUrl1:this.$MyUrl.imgUrl + "commodity/",
              nginxUrl2:this.$MyUrl.imgUrl + "course/",
              coupon:'',
              userVo:"",
              orderDetailList:[],
              order:'',
              userDetail:'',

              pageNum: 1,
              pageSize: 5,
              total: 9,

              editForm:{},
              editFormVisible:false,

            };
        },
        methods: {
          initCoupon(){
            if (this.order.couponid != null){

              let url = "order/queryCoupon"
              this.$axios.get(url,{
                params:{
                  couponId:this.order.couponid
                }
              })
              .then(res=>{
                this.coupon = res.data.data
                console.log(this.coupon)
              })
            }
          },


          doEdit(){
            let url = "order/modifyUserAddress"
            this.$axios.put(url,this.editForm)
                .then(res=>{
                  if (res.data.code ==101){
                    this.$message({
                      type:"success",
                      message:res.data.msg,
                      duration:1000
                    })
                    this.editFormVisible = false
                    this.initUserDetail()
                  }else{
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    })
                  }
                })
          },

          showEditForm(){
            this.editFormVisible=true
          },

          editFormClose(){
            this.editFormVisible=false
            this.$refs.editForm.resetFields();
          },

          initUserVo(){
            let url = "order/queryUserVo"
            this.$axios.get(url,{
              params:{
                id:this.order.userid,
                mid:this.order.user.memberId,
                sid:this.order.user.isSvip
              }
            })
            .then(res=>{
              this.userVo = res.data
              console.log(this.userVo)
            })
          },

          goUserDetails(row){
            let url = "tuser/queryUserDetails";
            this.$axios.get(url,{
              params:{
                uid:row.userid,
              }
            }).then(res=>{
              if (res.data.code == 200){
                let detailsList = res.data.data;
                this.$router.push({
                  path:"/UserDetails/" ,
                  query:{
                    user:this.userVo,
                    userDetails:detailsList
                  }
                })
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });
          },

          copyText(copytext) {
            const text = document.createElement('textarea'); // 创建节点
            text.setAttribute('readonly', 'readonly');
            text.value = copytext; // 赋值
            document.body.appendChild(text); // 插入节点
            text.setSelectionRange(0, text.value.length);
            text.select(); // 选中节点
            document.execCommand('copy'); // 执行浏览器复制方法
            if (document.body.removeChild(text)) {
              this.$message({ type: 'success', message: '复制成功',duration:1000 })
            } else {
              this.$message({ type: 'error', message: '复制失败',duration:1000 })
            }
          },


          initUserDetail(){
            let url = "order/queryUserDetail"
            this.$axios.get(url,{
              params:{
                id:this.order.userid
              }
            }).then(res=>{
              if (res.data.code == 101){
                this.userDetail = res.data.data
                this.editForm = res.data.data
              }else{
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            })
          }
        },
        created() {
          this.orderDetailList = this.$route.query.orderDetailList
          this.order = this.$route.query.order
          this.initUserDetail()
          this.initCoupon()
          this.initUserVo()
        }
    };
</script>


<style lang="less" scoped>




</style>